<template>
	<view>
		<sunMenu></sunMenu>
		<u-swiper :indicator="true" :circular="true" :list="list1" :height="swiperHeight" radius="0"
			imgMode="scaleToFill"></u-swiper>
		<view class="search-card">
			<view class="input-wrapper">
				<view>
					<view style="margin-bottom: 24rpx;">活動類型</view>
					<SearchSelect type="multiple" :options="cityOptions" :modelValue.sync="selectedCities" placeholder="全部"
						@change="handleCityChange" />
				</view>
				<view>
					<view style="margin-bottom: 24rpx;">地區</view>
					<SearchSelect type="multiple" :options="areaOptions" :modelValue.sync="selectedAreas" placeholder="全部"
						@change="handleAreaChange" />
				</view>
				<view>
					<view style="margin-bottom: 24rpx;">公里数</view>
					<SearchSelect type="multiple" :options="kmOptions" :modelValue.sync="selectedKms" placeholder="全部"
						@change="handleKmChange" />
				</view>
				<view>
					<view style="margin-bottom: 24rpx;">報名狀態</view>
					<SearchSelect type="single" :options="statusOptions" :modelValue.sync="selectedStatus" placeholder="請選擇"
						@change="handleStatusChange" />
				</view>
				<view>
					<view style="margin-bottom: 24rpx;">年份</view>
					<SearchSelect type="multiple" :options="yearOptions" :modelValue.sync="selectedYears" placeholder="全部"
						@change="handleYearChange" />
				</view>
				<view>
					<view style="margin-bottom: 24rpx;">月份</view>
					<SearchSelect type="multiple" :options="monthOptions" :modelValue.sync="selectedMonth" placeholder="全部"
						@change="handleMonthChange" />
				</view>
				<view>
					<view style="margin-bottom: 24rpx;">關鍵字搜尋</view>
					<SearchSelect :modelValue.sync="keywords" placeholder="請輸入關鍵字" @change="handleKeywordsChange"/>
				</view>
			</view>
			<button class="register-btn" @tap="handleSearch">搜尋</button>
		</view>
		<view class="section-title">
			<h1>活動賽事 / Event</h1>
		</view>
		<view class="activity-list">
			<view class="activity-grid">
				<view v-for="activity in activities" :key="activity.id" class="activity-card">
					<view class="activity-status" v-if="activity.status">{{activity.status}}</view>
					<image :src="activity.image" mode="aspectFill" />
					<view class="card-content">
						<view class="card-organizer">{{activity.organizer}}</view>
						<view class="card-title">{{activity.title}}</view>
						<view class="card-info">
							<view class="info-item">
								<uni-icons type="calendar" size="14"></uni-icons>
								<text>{{activity.date}}</text>
							</view>
							<view class="info-item">
								<uni-icons type="location" size="14"></uni-icons>
								<text>{{activity.location}}</text>
							</view>
							<view class="distance-tags">
								<text v-for="(distance, index) in activity.distances" 
									  :key="index" 
									  class="tag">{{distance}}</text>
							</view>
						</view>
						<button class="register-btn" 
								:class="{'btn-disabled': activity.status === '報名截止'}"
								@tap="handleRegister(activity)">
							{{activity.status === '報名截止' ? '已截止' : '我要報名'}}
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import sunMenu from '../../components/sun-menu/sun-menu.vue'
	import SearchSelect from '@/components/SearchSelect/SearchSelect.vue'
	export default {
		components: {
			sunMenu,
			SearchSelect
		},
		data() {
			return {
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				isPc: false,
				cityOptions: ['台北市', '新北市', '台中市', '高雄市', '台南市'],
				areaOptions: ['北區', '北區阿三大蘇打實打實啊实打实'],
				yearOptions: ['2024', '2025'],
				monthOptions: ['1', '2','3','1', '2','3','1', '2','3'],
				kmOptions: ['0.1km', '0.2km'],
				statusOptions: ['報名中', '報名截止'],
				selectedCities: [],
				selectedYears: [],
				selectedKms: [],
				selectedStatus:[],
				selectedAreas:[],
				selectedMonth:[],
				keywords:"",
				activities: [
					{
						id: 1,
						image: 'https://images.unsplash.com/photo-1552674605-db6ffd4facb5',
						title: '線上路跑',
						organizer: 'ZIZONE',
						date: '2025年4月7日 (星期一)',
						location: '線上路跑，不限地點',
						distances: ['3K'],
						status: '11/28前追先優惠'
					},
					{
						id: 2,
						image: 'https://images.unsplash.com/photo-1486218119243-13883505764c',
						title: 'COZY RUNNER CLUB',
						organizer: '慵懶跑者聚樂部',
						date: '2025年1月19日 (星期日)',
						location: '台中市西屯區中央球場',
						distances: ['5K', '10K'],
						status: '11/30報名截止'
					},
					{
						id: 3,
						image: 'https://images.unsplash.com/photo-1538370965046-79c0d6907d47',
						title: '關公馬拉松',
						organizer: '2025車城統神鎮安宮',
						date: '2025年3月23日 (星期日)',
						location: '車城統神鎮安宮',
						distances: ['7K', '22K', '42.195K']
					},
					{
						id: 4,
						image: 'https://images.unsplash.com/photo-1476480862126-209bfaa8edc8',
						title: '泰坦巨獸路跑',
						organizer: '2025 泰坦巨獸',
						date: '2025年5月15日 (星期四)',
						location: '台中場',
						distances: ['3.5K', '5K'],
						status: '11/21開始報名'
					}
				]
			}
		},
		computed: {
			swiperHeight() {
				return this.isPc ? '530px' : '300rpx'
			}
		},
		mounted() {
			// #ifdef H5
			this.isPc = document.documentElement.clientWidth >= 960
			window.addEventListener('resize', this.checkDevice)
			// #endif
		},
		beforeDestroy() {
			// #ifdef H5
			window.removeEventListener('resize', this.checkDevice)
			// #endif
		},
		methods: {
			checkDevice() {
				this.isPc = document.documentElement.clientWidth >= 960
			},
			handleSearch() {
				console.log(this.selectedKms)
			},
			handleCityChange(cities) {
				console.log('选择的城市：', cities)
			},
			handleYearChange(years) {
				console.log('选择的年份：', years)
			},
			handleKmChange(km) {
				console.log('选择的km：', km)
			},
			handleStatusChange(status) {
				console.log('选择的status：', status)
			},
			handleAreaChange(area) {
				console.log('选择的area：', area)
			},
			handleMonthChange(month) {
				console.log('选择的month：', month)
			},
			handleKeywordsChange(value) {
				console.log('输入的关键字：', value)
			},
			handleRegister(activity) {
				if (activity.status === '報名截止') return
				// 处理报名逻辑
				console.log('报名活动：', activity.title)
			}
		}
	}
</script>

<style>
	/* 搜��片样式优化 */
	.search-card {
		width: 90%;
		margin: 80rpx auto;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.input-wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 32rpx;
	}

	.input-wrapper > view {
		flex: 1;
		min-width: 280rpx;
	}

	.search-button {
		min-width: 120rpx;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 40rpx;
		background: linear-gradient(135deg, #0DC5B4 0%, #09A396 100%);
		color: white;
		border-radius: 40rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;
		box-shadow: 0 4rpx 12rpx rgba(13, 197, 180, 0.3);
		transition: all 0.3s ease;
	}

	/* 活动卡片样式优化 */
	.activity-grid {
		width: 90%;
		margin: 0 auto 40rpx;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: 30rpx;
	}

	.activity-card {
		position: relative;
		background: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
	}

	.activity-card:hover {
		transform: translateY(-6rpx);
		box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.12);
	}

	.activity-status {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		background: rgba(13, 197, 180, 0.9);
		color: white;
		padding: 8rpx 24rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		font-weight: 500;
		backdrop-filter: blur(4px);
		z-index: 1;
	}

	.activity-card image {
		width: 100%;
		height: 380rpx;
		object-fit: cover;
		transition: transform 0.3s ease;
	}

	.activity-card:hover image {
		transform: scale(1.03);
	}

	.card-content {
		padding: 32rpx;
	}

	.card-organizer {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 12rpx;
	}

	.card-title {
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 20rpx;
		line-height: 1.4;
		color: #333;
	}

	.card-info {
		margin-bottom: 24rpx;
	}

	.info-item {
		display: flex;
		align-items: center;
		gap: 12rpx;
		margin-bottom: 12rpx;
		color: #666;
		font-size: 24rpx;
	}

	.distance-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;
		margin: 16rpx 0;
	}

	.tag {
		background: linear-gradient(135deg, #0DC5B4 0%, #09A396 100%);
		color: white;
		padding: 6rpx 20rpx;
		border-radius: 6rpx;
		font-size: 22rpx;
		font-weight: 500;
	}

	.register-btn {
		background: linear-gradient(135deg, #0DC5B4 0%, #09A396 100%);
		color: white;
		border: none;
		border-radius: 40rpx;
		padding: 20rpx 24rpx;
		font-size: 28rpx;
		font-weight: 500;
		margin-top: 20rpx;
		width: 100%;
		transition: all 0.3s ease;
		box-shadow: 0 4rpx 12rpx rgba(13, 197, 180, 0.2);
	}

	.register-btn:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(13, 197, 180, 0.15);
	}

	.btn-disabled {
		background: linear-gradient(135deg, #999 0%, #888 100%);
		box-shadow: none;
		cursor: not-allowed;
	}
	.section-title{
		text-align: center; 
		margin: 80rpx 0;
		position: relative;
	}

	.section-title::after {
		content: '';
		display: block;
		width: 160rpx;
		height: 4rpx;
		background: #333;
		margin: 20rpx auto 0;
	}

	/* PC styles */
	@media screen and (min-width: 960px) {
		.search-card,
		.activity-grid {
			width: 1110px;
			max-width: 90%;
		}
		
		.input-wrapper {
			padding: 8rpx;
			gap: 40rpx;
		}
		
		.input-wrapper > view {
			flex: 0 1 300px;
		}
		
		.activity-grid {
			grid-template-columns: repeat(3, 1fr);
		}
		.search-card { 
			margin: 90px auto; 
		}
		.section-title {
			margin: 80px 0;
		}
		.section-title::after {
			margin: 20px auto 0;
			width: 100px;
		} 
	}
</style>